<template>
<div class="clean">
<div class="check16" style="background-color: #ffffff" >
    <div class="search1">
        <div class="find">
            <form action="###" class="searchForm">
          <input
            type="text"
            placeholder="输入关键词"
            v-model="keywords"
          >
          <button
            class="btn"
            type="button"
            @click="goSearch"
          >
            搜索
          </button>
          <el-button @click="delay" style="margin-left:10px">取消搜索</el-button>
          <el-button @click="toggleSelection()" style="margin-left:350px">取消选择</el-button>
            <el-button @click="allRemove">删除</el-button>
            <el-button  type="info" style="float:right;" @click="add">新增盘查记录</el-button>
          </form>
        <el-dialog title="新增盘查记录" :visible.sync="dialogFormVisible" >
           <el-form :model="form">
           <el-form-item label="货物类别"   :label-width="formLabelWidth">

<el-select
   v-model="form.goodsCategory"
   placeholder="选择货物类别"
   data-options="editable:false"
   value='text'
 >
   <el-option v-for="item in roleList"
              :key="item"
              :value="item"
              :label="item"
   >
   </el-option>
 </el-select>
            </el-form-item>
        <el-form-item label="仓库名"  :label-width="formLabelWidth">

<el-select
   v-model="form.warehouseId"
   placeholder="选择仓库ID"
  @click.native="category"
   data-options="editable:false"
   value='text'
 >
      <el-option v-for="(value,key,index) in roleList1"
              :key="key"
              :value="value.positionsLocation+'--->'+ value.id"
              :label="index"
   >
   </el-option>

 </el-select>
            </el-form-item>
              <el-form-item label="卫生情况" :label-width="formLabelWidth">

<el-select
   v-model="form.healthSituation"
   placeholder="选择卫生情况"

   data-options="editable:false"
   value='text'
 >
      <el-option value="良好"
   >
   </el-option>
      <el-option value="差"
   >
   </el-option>
 </el-select>
            </el-form-item>
              <el-form-item label="设备情况" :label-width="formLabelWidth">

<el-select
   v-model="form.equipmentInformation"
   placeholder="选择设备情况"

   data-options="editable:false"
   value='text'
 >
      <el-option value="良好"
   >
   </el-option>
      <el-option value="差"
   >
   </el-option>

 </el-select>
            </el-form-item>
            <el-form-item label="货物状态" :label-width="formLabelWidth">

<el-select
   v-model="form.goodsStatus"
   placeholder="选择货物情况"

   data-options="editable:false"
   value='text'
 >
      <el-option value="良好"
   >
   </el-option>
      <el-option value="有损"
   >
   </el-option>
 </el-select>
            </el-form-item>
             <el-form-item label="用户id" :label-width="formLabelWidth">
               <el-select
   v-model="form.userId"
   placeholder="选择用户Id"

   data-options="editable:false"
   value='text'
 >
      <el-option v-for="(value,key,index) in roleList2"
              :key="key"
              :value="value.员工id"
              :label="index"
   >
   </el-option>
 </el-select>
            </el-form-item>
              <el-form-item label="盘查时间"  @click.native="Time" :label-width="formLabelWidth">
                     <el-input v-model ="form.scrutinyTime" style=" width:220px;" ></el-input>
              </el-form-item>
      </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="addUser(form)">确 定</el-button>
           </div>
           </el-dialog>
        </div>
  <el-table
   ref="multipleTable"
    tooltip-effect="dark"
     @selection-change="handleSelectionChange"
      class="table7"
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" max-height="500"
    >
          <el-table-column
      type="selection"
      width="35">
      </el-table-column>
           <el-table-column fixed prop="positions_location" label="仓库名" width="80">
      </el-table-column>
      <el-table-column prop="goods_category" label="货物类别" width="100">
      </el-table-column>
      <el-table-column prop="temperature" label="温度(℃)" width="100">
      </el-table-column>
      <el-table-column prop="gas_concentration" label="CO₂浓度(%)" width="135">
      </el-table-column>
      <el-table-column prop="humidity" label="湿度(%)" width="100">
      </el-table-column>
       <el-table-column prop="goods_status"  label="货物状态" width="100">
      </el-table-column>
      <el-table-column prop="health_situation" label="卫生情况" width="100">
      </el-table-column>
      <el-table-column prop="equipment_information" label="设备情况" width="100">
      </el-table-column>
      <el-table-column prop="scrutiny_time"  label="盘查时间" width="230">
      </el-table-column>

       <el-table-column label="操作" width="80">
          <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.row)"
          type="text"
          size="small"
      >
         删除
      </el-button>
      </template>
      </el-table-column>

    </el-table>
    <div class="block">
      <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination
            @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10,20,30,40]"
              :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
        </div>
    </div>
  </div>
</div>
</div>
</template>

<script>
import axios from '../../../axios'

export default {
  name: 'chuli',
  inject: ['reload'],
  data () {
    return {

      form: {
        goodsCategory: '',
        healthSituation: '',
        warehouseId: '',
        goodsStatus: '',
        userId: '',
        equipmentInformation: '',
        scrutinyTime: ''
      },
      keywords: '',
      searchBoolean: false,
      tableData: [
      ],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
      dialogFormVisible: false,
      formLabelWidth: '120px',
      multipleSelection: [],
      roleList: [],
      roleList1: [],
      roleList2: [],
      delete: {
        id: '',
        pageSize: '',
        ids: []
      }
    }
  },
  methods: {
    delay () {
      this.keywords = '',
      axios({
        url: '/dp/question/queryByBlurry',
        method: 'GET',
        params:
                {
                  wareCategory: this.keywords,
                  wareNames: this.keywords

                },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data
        this.searchBoolean = true
        // 拿到后端数据总条数
        this.total = parseInt(this.tableData.length)
      })
    },

    category () {
      this.role1()
    },
    getTime () {
      var date = new Date()
      var seperator1 = '-'
      var seperator2 = ':'
      // 以下代码依次是获取当前时间的年月日时分秒
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      var minute = date.getMinutes()
      var hour = date.getHours()
      var second = date.getSeconds()
      // 固定时间格式
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour
      }
      if (minute >= 0 && minute <= 9) {
        minute = '0' + minute
      }
      if (second >= 0 && second <= 9) {
        second = '0' + second
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate +
      					' ' + hour + seperator2 + minute + seperator2 + second
	  return currentdate
    },

    Time () {
      this.getTime()
      this.form.scrutinyTime = this.getTime()
    },
    role () {
      axios({
        url: '/dp/warehouse/queryGoodsCategory',
        method: 'get'
      }).then(res => {
        console.log(res)
        this.roleList = res.data.data
      }).catch(err => {
      //  console.log(err.response)
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
    },
    role1 () {
      axios({
        url: '/dp/warehouse/queryWareName',
        method: 'get',
        params: {
          category: this.form.goodsCategory
        }
      }).then(res => {
        console.log(res)
        this.roleList1 = res.data.data
      }).catch(err => {
      //  console.log(err.response)
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
    },
    role2 () {
      axios({
        url: '/dp/question/getName',
        method: 'get'
      }).then(res => {
        console.log(res)
        this.roleList2 = res.data.data
        console.log(this.roleList2)
        /*  this.roleList2=[]
        for(var i=0;i<Object.keys(res.data.data).length;i++){
          var obj = new Object();
          obj=Object.keys(res.data.data[i])
           console.log(obj[0]);
          this.roleList2.push(obj[0]) */
      }).catch(err => {
      //  console.log(err.response)
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
    },
    add () {
      this.dialogFormVisible = !this.dialogFormVisible,
      this.role(),
      this.role2()
    },
    // 新增功能
    addUser (form) {
      console.log(form)
      console.log(this.form.warehouseId)
      var str = this.form.warehouseId.split('--->')
      console.log(str[0])
      console.log(str[2])
      console.log(str[1])
      this.form.warehouseId = parseInt(str[1])
      console.log(this.form)
      this.dialogFormVisible = false
      axios({
        url: '/dp/question/addquestion',
        method: 'POST',
        data: JSON.stringify(this.form)
      }).then(res => {
        console.log(res)
      /* this.tabledata = res.data.data;
        this.total = parseInt(this.tableData.length);  */
      })
      this.reload()
    },
    // 搜索
    serarch () {
      axios({
        url: '/dp/question/queryByBlurry',
        method: 'GET',
        params:
                {
                  wareCategory: this.keywords,
                  wareNames: this.keywords

                },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data
        this.searchBoolean = true
        // 拿到后端数据总条数
        this.total = parseInt(this.tableData.length)
      })
    },
    // 模糊查询
    goSearch () {
      this.currentPage = 1,
      this.serarch()
    },

    // 单行删除
    deleteRow (val) {
      // 删除的id
      this.delete.id = parseInt(val.id)
      // 刷新的页面条数,page定义要在del后
      this.delete.pageSize = this.pageSize
      console.log(this.delete.id)
      console.log(this.delete)
      axios({
        url: '/dp/question/delete',
        method: 'delete',
        params: {
          id: this.delete.id
        }
      }).then(res => {
        console.log(res)
        this.tabledata = res.data.data
        this.total = parseInt(this.tableData.length)
      })
      this.reload()
    },
    // 批量删除
    allRemove () {
      this.delete.pageSize = this.pageSize
      console.log(this.delete.ids)
      axios({
        url: '/dp/question/deleteByBatch',
        method: 'POST',
        data: JSON.stringify(this.delete.ids),
        headers: {
          'Content-Type': 'application/JSON'
        }
      }).then(res => {
        this.tabledata = res.data.data
        this.total = parseInt(this.tableData.length)
      })
      this.reload()
    },
    handleSelectionChange (val) {
      var array = []
      this.multipleSelection = val
      val.forEach(element => {
        array.push(element.id)
      })
      this.delete.ids = array
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  },

  created () {
    axios({
      url: '/dp/question/query',
      method: 'get'
    }).then(res => {
      console.log(res)
      this.tableData = res.data.data
      console.log(this.tableData)
      this.otal = parseInt(res.data.data)
      console.log(this.page.total)
    }).catch(err => {
      console.log(err.response)
      /*  this.$alert(err.response.data.msg, "请联系管理员", {
              confirmButtonText: '确定',
              callback: action => {

              }
            }); */
    })
  }
}

</script>
<style lang="less" >
.clean{
   width: 1200px;
    margin: 30px auto;
    display: flex;
    position: relative;
    .check16 {
  height: 630px;
  overflow: hidden;
  margin-left: 50px;

 .cell
{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-pagination{
  .el-pagination__total{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-input__inner{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
.button{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
.el-pager
.number{
  font-weight: bold;
  font-size: 20px;

}
.el-pagination__jump{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
}
   .search1 {
      float: left;
      margin-top: 30px;

      .searchForm {
        overflow: hidden;
        margin-right: 0px;

        input {
          box-sizing: border-box;
          width: 300px;
          height: 38px;
          padding: 0px 4px;
          border: 2px solid rgb(8, 138, 8);
          float: left;

          &:focus {
            outline: none;
          }
        }

        .btn {
          height: 38px;
          width: 68px;
          background-color: #0f778a;
          border: none;
          color: #fff;
          float: left;
          cursor: pointer;

          &:focus {
            outline: none;
          }
        }}}

    .table7{
           width: 1150px!important;
       }

 }
}
</style>
